<template>
  <div>
    <PageTools :show-before="showBefore">
      <template #before>
        <span> 基于</span>
      </template>
      <template #after>
        <el-button size="small" type="primary" @click="showDialog = true"
          >导入</el-button
        >
        <el-button size="small" type="warning" @click="exportDte"
          >导出</el-button
        >
      </template>
    </PageTools>
    <!-- 表格组件 -->
    <el-table :data="list">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="工号" prop="workName"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="部门" prop="department"></el-table-column>
    </el-table>

    <!-- 弹层 -->
    <el-dialog title="展示" :visible="showDialog" width="50%" >
      <upload-excel :on-success="success"></upload-excel>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>




<script>
import PageTools from "@/components/PageTools";
export default {
  components: {
    PageTools,
  },
  data() {
    return {
      dialogVisible:false,  
      showBefore: true,
      showDialog: false, //弹层显示隐藏
      list: [
        {
          username: "夏洁",
          workName: "2",
          sex: "女",
          department: "研发部",
        },
        {
          username: "慧慧",
          workName: "1",
          sex: "女",
          department: "策划部",
        },
        {
          username: "阿云",
          workName: "3",
          sex: "女",
          department: "就业部",
        },
        {
          username: "胡洋",
          workName: "1",
          sex: "男",
          department: "创业部",
        },
      ],
    };
  },
  methods: {
    // 导入员工的信息
    // results 代表导入的内容 [{}]
    success({ header, results }) {
      const userRelations = {
        姓名: 'username',
        工号: 'workName',
        性别: 'sex',
        部门: 'department'
      };
      //   遍历上传文件内容
      var newArr = results.map((item) => {
        var userInfo = {}; // 新建的空对象 属性名是新建的属性名  值还是原来的值
        // debugger
        // 拿到上传文件的每一项的属性名的数组进行遍历
        Object.keys(item).forEach((key) => {
          userInfo[userRelations[key]] = item[key]
        })
        // 返回这个对象
        return userInfo
      })
     this.list.push(...newArr)
      console.log(this.list)
      this.$message.success("导入excel成功")
      //   上传成功关闭弹层
      this.showDialog = false;
    },
    exportDte() {
      const headers = {
        姓名: "username",
        工号: "workName",
        性别: "sex",
        部门: "department",
      };
      // 使用vendor文件中的Export2Excel.js文件进行导出
      // Export2Excel实现懒加载
      import('@/vendor/Export2Excel').then((excel) => {
        const data = this.formaJson(headers, this.list)
        excel.export_json_to_excel({
          // 配置项
          header: Object.keys(headers), // 表头
          // data 里面放的还是数组
          data: data,
          filename: '资料表'
        })
      })
    },
     // 导出文件的方法
    formaJson(headers, list) {
      return list.map((item) => {
        return Object.keys(headers).map((key) => item[headers[key]])
      })
    }
  },
};
</script>

<style>
</style>